<template>
  <div>
    <!--分为24栏 span表示一列占6栏 四列刚好均分-->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card class="box-card">
          <Detail title="总销售额" count="¥ 126560">
            <!--使用具名插槽-->
            <template slot="charts">
              <span>周同比</span><span>56.67%<svg t="1644687628809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3001" width="16" height="16"><path d="M960 704L512 256l-448 448z" fill="#d81e06" p-id="3002" /></svg></span>
              &nbsp;&nbsp;&nbsp;
              <span>日同比</span><span>19.16%&nbsp;&nbsp;&nbsp;<svg t="1644687732835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7287" width="16" height="16"><path d="M64 320l448 448 448-448z" fill="#1afa29" p-id="7288" /></svg></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <Detail title="访问量" count="88460">
            <template slot="charts">
              <LineChart />
            </template>
            <template slot="footer">
              <span>日访问量&nbsp;88460</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <Detail title="支付笔数" count="88460">
            <template slot="charts"><BarChart></BarChart></template>
            <template slot="footer"><span>转化率&nbsp;66.66%</span></template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <Detail title="运营活动效果" count="78%">
            <template slot="charts"><ProgressChart></ProgressChart></template>
            <template slot="footer">
              <span>周同比</span><span>56.67%<svg t="1644687628809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3001" width="16" height="16"><path d="M960 704L512 256l-448 448z" fill="#d81e06" p-id="3002" /></svg></span>
              &nbsp;&nbsp;&nbsp;
              <span>日同比</span><span>19.16%&nbsp;&nbsp;&nbsp;<svg t="1644687732835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7287" width="16" height="16"><path d="M64 320l448 448 448-448z" fill="#1afa29" p-id="7288" /></svg></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from '@/views/dashboard/Card/Detail'
import LineChart from './LineChart'
import BarChart from './BarChart'
import ProgressChart from './ProgressChart'
export default {
  name: 'Card',
  components: {
    Detail,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>

<style scoped>
.box-card span{
  padding-right: 15px;
}
</style>
